<script setup>

import Son from "./Son.vue";
import {reactive, ref} from "vue";

//1、 父传子：单向数据流
// const money = ref(100);
// const books = ref(["西游记","水浒传"])

const data = reactive({
  money: 100,
  books: ["西游记","水浒传"]
})

function moneyMinis(arg){
  // alert("感知到儿子买了棒棒糖"+arg)
  data.money+=arg;
}
</script>

<template>
  <div style="background-color: #f9f9f9">
    <h2>Father</h2>
    <button @click="data.money+=10">充值</button>
<!--      <Son :books="data.books" :money="data.money"-->
<!--           @buy="moneyMinis"/>-->
    <Son v-bind="data">
      <template v-slot:btn>
        买飞机
      </template>
      <template #title>
        买大炮
      </template>
    </Son>
  </div>
</template>

<style scoped>

</style>
